<template>
 <view class="address-form">
    <h4 class="form-title">新增收货地址</h4>
    
    <view class="form-item">
      <text class="form-label">所在地区：</text>
      <picker 
        class="form-input" 
        mode="selector" 
        :range="regions" 
        range-key="name"
        @change="handleRegionChange"
      >
        <view class="picker-text">{{ formData.region || '请选择省/市/区' }}</view>
      </picker>
    </view>
    
    <!-- 其他表单项目保持不变 -->
    <view class="form-item">
      <text class="form-label">详细地址：</text>
      <input 
        class="form-input" 
        placeholder="街道、小区、大厦或学校" 
        v-model="formData.address" 
      />
    </view>
    
    <view class="form-item">
      <text class="form-label">门牌号：</text>
      <input 
        class="form-input" 
        placeholder="楼号-门牌号" 
        v-model="formData.doorNumber" 
      />
    </view>
    
    <view class="form-item">
      <text class="form-label">收货人：</text>
      <input 
        class="form-input" 
        placeholder="请输入收货人姓名" 
        v-model="formData.consignee" 
      />
    </view>
    
    <view class="form-item">
      <text class="form-label">联系电话：</text>
      <input 
        class="form-input"
        type="number"
        placeholder="请输入手机号码" 
        v-model="formData.phone" 
      />
    </view>
    
    <button class="submit-btn" @click="submitForm">保存地址</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      regions: [
        { name: '杭州', value: '杭州' },
        { name: '上海', value: '上海' },
        { name: '武汉', value: '武汉' },
        { name: '北京', value: '北京' }
      ],
      formData: {
        region: '',
        address: '',
        doorNumber: '',
        consignee: '',
        phone: ''
      },
      token: ""
    
    }
  },
  onShow(){
      this.token = uni.getStorageSync('token')
  },
  methods: {
    handleRegionChange(e) {
      const index = e.detail.value
      this.formData.region = this.regions[index].value
    },
    submitForm() {
      // 这里可以添加表单验证
      if (!this.formData.region ) {
        uni.showToast({
          title: '所在地区信息为空',
          icon: 'none'
        });
        return;
      }
      if (!this.formData.address ) {
        uni.showToast({
          title: '所在详细地址为空',
          icon: 'none'
        });
        return;
      }
       if (!this.formData.consignee ) {
        uni.showToast({
          title: '收货人信息为空',
          icon: 'none'
        });
        return;
      } 
      if (!this.formData.phone ) {
        uni.showToast({
          title: '联系电话为空',
          icon: 'none'
        });
        return;
      }
      // 表单验证通过后的处理
      console.log('提交的地址信息：', this.formData);
      const orderData={
           region: this.formData.region,
        address: this.formData.address,
        doorNumber: this.formData.doorNumber,
        consignee: this.formData.consignee,
        phone: this.formData.phone,
        static:false,
        token:this.token
      }
        uni.request({
                url: 'http://localhost:3000/address',
                method: 'POST',
                data: orderData,
                header: {
                    'Content-Type': 'application/json'
                },
                success(res) {
                    console.log('请求成功', res.data);
                    uni.showToast({
                    title: '地址保存成功',
                    icon: 'success'
                     });

                     uni.navigateTo({
                        url:"/pages/address/address"
                     })
                },
                fail(err) {
                    console.error('请求失败', err);
                }
            });
      
      
      
      // 这里可以添加保存到本地或提交到服务器的逻辑
    }
  }
}
</script>

<style>
.address-form {
  padding: 20rpx;
}

.form-title {
  font-size: 36rpx;
  text-align: center;
  margin: 20rpx 0 40rpx;
  color: #333;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.form-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #666;
}

.form-input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.submit-btn {
  margin-top: 50rpx;
  background-color: #07c160;
  color: #fff;
  border: none;
  border-radius: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
}
</style>